<template>
  <div class="modern-journal">
    <div class="entries-grid">
      <div
        v-for="entry in entries"
        :key="entry.id"
        class="entry-card"
        :class="[`mood-${entry.mood}`]"
      >
        <!-- 日期标签 -->
        <div class="date-tag">
          <div class="month">{{ formatMonth(entry.date) }}</div>
          <div class="day">{{ formatDay(entry.date) }}</div>
        </div>

        <!-- 天气和心情图标 -->
        <div class="meta-icons">
          <span class="weather-icon" :title="getWeatherText(entry.weather)">
            {{ getWeatherEmoji(entry.weather) }}
          </span>
          <span class="mood-icon" :title="getMoodText(entry.mood)">
            {{ getMoodEmoji(entry.mood) }}
          </span>
        </div>

        <!-- 标题 -->
        <h3 v-if="entry.title" class="entry-title">{{ entry.title }}</h3>

        <!-- 内容 -->
        <p class="entry-content">{{ entry.content }}</p>

        <!-- 标签 -->
        <div v-if="entry.tags && entry.tags.length" class="tags">
          <span v-for="tag in entry.tags" :key="tag" class="tag">
            #{{ tag }}
          </span>
        </div>

        <!-- 时间戳 -->
        <div class="timestamp">
          {{ formatTime(entry.createdAt) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { JournalEntry } from '../types'

interface Props {
  entries: JournalEntry[]
}

defineProps<Props>()

const formatMonth = (dateStr: string) => {
  const date = new Date(dateStr)
  return date.toLocaleDateString('zh-CN', { month: 'short' })
}

const formatDay = (dateStr: string) => {
  const date = new Date(dateStr)
  return date.getDate()
}

const formatTime = (dateStr: string) => {
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  })
}

const getWeatherEmoji = (weather?: string) => {
  const weatherMap: Record<string, string> = {
    sunny: '☀️',
    cloudy: '☁️',
    rainy: '🌧️',
    snowy: '❄️'
  }
  return weather ? weatherMap[weather] : ''
}

const getWeatherText = (weather?: string) => {
  const weatherTextMap: Record<string, string> = {
    sunny: '晴天',
    cloudy: '多云',
    rainy: '雨天',
    snowy: '下雪'
  }
  return weather ? weatherTextMap[weather] : ''
}

const getMoodEmoji = (mood?: string) => {
  const moodMap: Record<string, string> = {
    happy: '😊',
    sad: '😢',
    neutral: '😐',
    excited: '🤩',
    tired: '😴'
  }
  return mood ? moodMap[mood] : ''
}

const getMoodText = (mood?: string) => {
  const moodTextMap: Record<string, string> = {
    happy: '开心',
    sad: '难过',
    neutral: '平静',
    excited: '兴奋',
    tired: '疲惫'
  }
  return mood ? moodTextMap[mood] : ''
}
</script>

<style scoped>
.modern-journal {
  padding: 20px 0;
}

.entries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 0 20px;
}

.entry-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-left: 4px solid #e0e0e0;
}

.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 根据心情改变边框颜色 */
.entry-card.mood-happy {
  border-left-color: #ffd93d;
}

.entry-card.mood-sad {
  border-left-color: #6bcfff;
}

.entry-card.mood-neutral {
  border-left-color: #9e9e9e;
}

.entry-card.mood-excited {
  border-left-color: #ff6b9d;
}

.entry-card.mood-tired {
  border-left-color: #b19cd9;
}

.date-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.date-tag .month {
  font-size: 12px;
  opacity: 0.9;
}

.date-tag .day {
  font-size: 20px;
  margin-top: 2px;
}

.meta-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 24px;
}

.weather-icon,
.mood-icon {
  cursor: help;
  transition: transform 0.2s;
}

.weather-icon:hover,
.mood-icon:hover {
  transform: scale(1.2);
}

.entry-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.entry-content {
  font-size: 14px;
  line-height: 1.8;
  color: #666;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.timestamp {
  font-size: 12px;
  color: #999;
  text-align: right;
}

@media (max-width: 768px) {
  .entries-grid {
    grid-template-columns: 1fr;
  }
}
</style>
